<template>
  <div>
    <!-- 自定义规格列表 -->
    <!-- 搜索 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-input v-model="Specification" placeholder="规格名称"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="Specification_search"
          >搜索</el-button
        >
      </el-col>
    </el-row>

    <!-- 签约按钮位置 -->
    <el-row :gutter="20" style="margin:20px 0">
      <!-- 返回签约分类 -->
      <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="3">
        <el-button
          style="width:100%; margin-left:-10px"
          type="info"
          icon="el-icon-back"
          @click="Specification_Back"
          >返回签约分类</el-button
        >
      </el-col>
      <!-- 添加自定义签约按钮 -->
      <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="3">
        <el-button
          style="width:100%; margin-left:-10px"
          type="primary"
          icon="el-icon-plus"
          @click="Add_Custom_Specification = true"
          >添加自定义规格</el-button
        >
      </el-col>

      <!-- 隐藏框 -->
      <el-dialog title="申请品牌" :visible.sync="Add_Custom_Specification">
        <el-form
          :model="Specification_form"
          :rules="Specification_rules"
          ref="Specification_form"
        >
          <el-form-item label="规格名称" label-width="120px" prop="name">
            <el-input v-model="Specification_form.name"></el-input>
          </el-form-item>

          <el-form-item label="规格别名" label-width="120px" prop="name">
            <el-input v-model="Specification_form.Alias"></el-input>
          </el-form-item>

          <el-form-item label="规格值" label-width="120px" prop="name">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="Add_Specification"
              >添加规格值</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 表单 -->
        <el-table :data="Specification_tableData" style="width: 100%" border>
          <el-table-column label="规格值名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="规格名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="排序" min-width="160">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.date"
                controls-position="right"
                @change="Specification_tableData_Change"
                :min="1"
                :max="10"
              ></el-input-number>
            </template>
          </el-table-column>

          <el-table-column prop="address" label="规格值类型"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="
                  Specificationn_tableData_Delete(scope.$index, scope.row)
                "
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Add_Custom_Specification = false">取 消</el-button>
          <el-button
            type="primary"
            @click="Specification_submit('Specification_form')"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
        <el-button
          style="width:100%; margin-left:-10px"
          type="danger"
          icon="el-icon-delete"
          @click="Specification_Del"
          >批量删除</el-button
        >
      </el-col>
    </el-row>

    <!-- 表单 -->
    <el-table
      border
      ref="multipleTable"
      :data="Specification_main_tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="Specification_main_tableData_Change"
    >
      <el-table-column type="selection" align="center"> </el-table-column>
      <el-table-column label="规格名称">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="规格别名"> </el-table-column>
      <el-table-column prop="address" label="规格类型"> </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="
              Specification_main_tableData_Compile(scope.$index, scope.row)
            "
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="
              Specification_main_tableData_Delete(scope.$index, scope.row)
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页 -->

    <div  style="margin: 20px  0">
      <el-pagination
        @size-change="Specification_main_tableData_SizeChange"
        @current-change="Specification_main_tableData_CurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      // 规格名称输入框
      Specification: "",
      //自定义规格隐藏框
      Add_Custom_Specification: false,
      // 自定义规格隐藏框表单
      Specification_form: {
        name: "",
        Alias: "",
      },
      // 自定义个龟儿隐藏框校验规则
      Specification_rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      // 自定义表单数据
      Specification_tableData: [
        {
          date: 1,
          name: "",
          address: "自定义",
        },
      ],

      // 自定义表单主页数据
      Specification_main_tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      // 分页当前页数
      currentPage: 1,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 规格名称搜索
    Specification_search() {},
    // 返回签约分类按钮
    Specification_Back() {
      this.$router.push("/Custom");
    },
    // 添加自定义规格按钮
    Add_Specification() {
      let obj = {
        date: 1,
        name: "",
        address: "自定义",
        key: Date.now(),
      };
      this.Specification_tableData.push(obj);
    },
    // 自定义规格提交按钮
    Specification_submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Add_Custom_Specification = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 批量删除按钮
    Specification_Del() {},
    // 自定义排序监听事件
    Specification_tableData_Change(val) {
      console.log(val);
    },
    // 自定义表单删除按钮
    Specificationn_tableData_Delete(index, row) {
      // console.log(index, row);
      if (index !== -1) {
        this.Specification_tableData.splice(index, 1);
      }
    },

    // 自定义主页编辑按钮
    Specification_main_tableData_Compile(index, row) {},
    // 自定义主页删除按钮
    Specification_main_tableData_Delete(index, row) {},
    // 自定义勾选框
    Specification_main_tableData_Change(index) {},
    // 分页
    Specification_main_tableData_SizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    Specification_main_tableData_CurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },

  watch: {},
};
</script>
<style lang="" scoped></style>
